<template>
	<div>
		<Card>
			装修圈列表 <Icon type="ios-arrow-forward" /> 详情
		</Card>
		<Card>
			<div>
				<img :src="articleDetail.avatar" class="avatar"/>
				<p><span style="margin-left: 20px;margin-top: 10px;">用户头像</span></p>
				<p><span style="margin-left: 20px;margin-top: 10px;">用户名：{{ articleDetail.name }}</span></p>
				<br />
				<hr />
				<br />
				<div class="article-container">
					<div>
						<h2>发布内容</h2>
						<br />
						<div class="article-content">{{ articleDetail.content }}</div>
					</div>
					<div>
						<h2>发布图片</h2>
						<br />
						<img :src="item" v-for="(item, index) in articleDetail.pictureArray" :key="index"/>
					</div>
				</div>
				<br /><br />
			</div>
		</Card>
	</div>
</template>

<script>
	import path from '@/api/path.js';
	import axios from '@/libs/api.request';
	let url = path.url;

	export default {
		data(){
			return {
				id: this.$route.query.id,
				articleDetail: {}
			}
		},
		methods: {
			getarticleDetail(){
				axios.request({
					url: `${url}Article/getArticleDetail`,
					method: 'post',
					data: {
						id: this.id
					}
				}).then(res=>{
					if (res.data.status == 1) {
						this.articleDetail = res.data.content;
					} else {
						throw '获取数据失败！'
					}
				})
			}
		},
		created(){
			console.log(this.id);
			this.getarticleDetail()
		}
	}
</script>

<style scoped="scoped" lang="scss">
 .avatar{
	 width: 100px;
	 border-radius: 100%;
 }
 .article-container{
	 display: flex;
	 justify-content: space-between;
	 .article-content{
		 width: 300px;
		 text-indent: 30px;
	 }
	 img{
		 width: 200px;
	 }
 }
 .article-container>div{
	 width: 50%;
 }
</style>
